<template>
  <div class="query">
    <mu-appbar title="订单查询" style="background:#18a716;">
      <mu-icon-button icon="arrow_back" @click="back" slot="left"/>
      <!--<p slot="default">订单查询</p>-->
    </mu-appbar>
    <div class="goods">
      <!--<mu-paper class="content-card" :zDepth="3">-->

      <mu-paper class="content-card">

        <mu-text-field label="预留码" class="form-item" v-model="order.payer" style="width: 93%"
                       hintText="下单时填写的QQ号或者手机号"/>
        <br/>
      </mu-paper>
      <mu-raised-button style="margin-top: 10px" label="查询" backgroundColor="#FF9933" @click="queryOrder" primary
                        fullWidth/>
      <!--</mu-paper>-->
      <!--<div>
        <ul style="list-style: none">
          <li >商品名称</li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <h5></h5>

      </div>-->
    </div>
    <div class="result">
      <mu-paper class="content-card">
        <div class="card-title">
          <h4 style="margin-left: 12px;color: orange">查询结果</h4>
        </div>

        <mu-table :showCheckbox="false" >
          <mu-thead>
            <mu-tr>
              <mu-th>商品名称</mu-th>
              <mu-th>下单时间</mu-th>
              <mu-th>状态</mu-th>
            </mu-tr>
          </mu-thead>
          <mu-tbody>
            <mu-tr v-if="resultList.size !== 0" v-for="(item,index) in resultList" :key="index">
              <mu-td>{{item.goodsName}}</mu-td>
              <mu-td>{{item.orderTime}}</mu-td>
              <mu-td>{{item.state}}</mu-td>
            </mu-tr>
            <div v-if="showNothing" style="margin-top: 30px;margin-left: 10px">
              没找到你要的结果哦
            </div>
          </mu-tbody>
        </mu-table>
      </mu-paper>


    </div>

    <mu-dialog :open="dialog" title="提醒">
      你有选项忘了填啦~~~
      <mu-flat-button label="确定" slot="actions" primary @click="close"/>
    </mu-dialog>
  </div>
</template>

<script>
  import {getGoodsByTypeId, getGoodsType, queryTask} from "../api/api";

  export default {
    name: "query",
    data() {
      return {
        dialog: false,
        showNothing: false,
        order: {
          goodsId: 1,
          payer: null,
        },
        resultList: []
      }
    },
    methods: {
      close() {
        this.dialog = false
      },
      back() {
        this.$router.push('/')
      },
      queryOrder() {
        this.showNothing = false
        let order = {
          goods_id: this.order.goodsId,
          payer: this.order.payer
        }
        if (this.order.payer === null || this.order.goodsId === null) {
          this.dialog = true
          return
        }
        queryTask(order).then(res => {
          this.resultList = res.data.data
          if (res.data.data.length === 0) {
            this.showNothing = true
          }
        })
      }

    },
    mounted() {
    }

  }
</script>

<style>
  .content-card {
    margin-bottom: 10px;
    padding-bottom: 20px;
    border: 1px solid #18a716;
    border-radius: 5px;
    /*height: 300px;*/
    /*display: flex;*/
    /*width: 95%;*/
  }
  .query {
    /*background: rgb(211, 168, 9);*/
    margin-bottom: 80px;

  }
  .form-item {
    margin: 10px;

  }

  .goods {

    /*background: rgb(211, 168, 9);*/
    /*padding-left: 12px;
    padding-top: 8px;*/
    padding: 5px;
  }



  .result {
    /*margin-top: 5px;*/
    padding: 5px;
    /*margin-bottom: 60px;*/
  }
  .mu-table {
    table-layout: auto !important;
  }
</style>
